<template>
  <div>
    <template v-if="myTeam.length!==0">
      <template v-for="el in myTeam">
        <div v-bind:key="el._id" class="card col-md-6 col-sm-12 overflow-hidden" style="position: relative;">
          <div class="card-body">
            <p class="card-title"><span>{{ el.name }}</span></p>
            <h6 class="card-subtitle mb-2 text-muted">组队时间：{{ el.updateTime|time }}</h6>
            <div>
              <p>
                队伍信息<a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
                       aria-controls="collapseExample">
                点击查看
              </a>
              </p>
              <div class="collapse" id="collapseExample">
                <div class="card card-body">
                  <p>竞赛名称：{{ el.contest[0].name }}</p>
                  <p>队长：{{ el.children[0].userName }}</p>
                  <p>队伍成员：{{ el.children|children }}</p>
                  <p>人数限制：{{ el.children.length }}/{{ el.num }}</p>
                </div>
              </div>
            </div>
            <div class="text-center">
              <template v-if="el.userID === $store.getters['userStore/userInfo']._id">
                <button type="button" class="btn btn-primary me-1" data-bs-toggle="modal"
                        data-bs-target="#submitModal"
                        @click="uploadTeamID = el._id;contestID = el.contestID;contestName = el.contest[0].name"
                >
                  提交作品
                </button>
                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal"
                        @click="teamID=el._id ;del=true">解散队伍
                </button>
              </template>
              <template v-else>
                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal"
                        @click="handleClickTeam(el._id,el.children)">申请退出
                </button>
              </template>
            </div>
          </div>
        </div>
      </template>
    </template>
    <template v-else>
      <el-empty class="border" description="暂无队伍信息"></el-empty>
    </template>
    <!--   模态框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">温馨提示</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            确认解散该队伍吗？
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <template v-if="del">
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal" @click="DelMyTeam">确认解散</button>
            </template>
            <template v-else>
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal" @click="popMyTeam">确认退出</button>
            </template>
          </div>
        </div>
      </div>
    </div><!--   模态框 -->
    <div class="modal fade" id="submitModal" tabindex="-1" aria-labelledby="submit" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="submit">提交团队作品</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div>
              竞赛名称：{{ contestName }}
            </div>
            <div>
              <input @change="uploadFile" ref="file" single accept="application/msword"
                     class="form-control form-control-lg" id="file"
                     type="file">
            </div>
            <label for="formFileLg" class="form-label">只支持<span class="text-danger">word</span>文档类型文件</label>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-danger" @click="handleUploadFile(true)">确认提交</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import user from "../../../api/user";
import time from "../../../filter/time";
import children from "../../../filter/children";

import axios from "axios";

export default {
  name: "myTeam",
  mounted() {
    this.GetMyTeam()
  },
  filters: {
    time,
    children
  },
  data() {
    return {
      myTeam: [],
      teamID: '',
      children: [],
      del: true,
      uploadTeamID: '',
      contestID: '',
      contestName:''
    }
  },
  methods: {

    handleUploadFile(isTeam) {
      const loading = this.$loading({
        lock: true,
        text: '上传中...请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios.post("/api/Admin/upload/file", this.file).then((r) => {
        const param = {
          name: r.data.data.fileInfo.name,
          path: r.data.data.fileInfo.path,
          isTeam,
          teamID: this.uploadTeamID,
          userID: this.$store.getters["userStore/userInfo"]._id,
          contestID: this.contestID
        }
        user.uploadWork(param).then(r => {
          if (r.data.status === '200' && r.data.data.upload) {
            this.$message({
              message: '上传成功',
              type: 'success'
            });
            loading.close()
          } else {
            this.$message.error('上传失败，作品已上传');
          }
        })
      }).catch(() => {
        this.$message.error('上传失败');
        loading.close()
      })
    },

    //上传文件
    uploadFile(e) {
      let form = new FormData()
      form.append("content", e.target.files[0])
      this.file = form
    },

    handleClickTeam(id, children) {
      this.teamID = id
      this.del = false
      this.children = children.filter(v => v.userID !== this.$store.getters["userStore/userInfo"]._id)
    },
    // 退出队伍
    popMyTeam() {
      const param = {
        id: this.teamID,
        children: this.children
      }
      user.popMyTeam(param).then(() => {
        this.GetMyTeam()
      })
    },
    // 解散队伍
    DelMyTeam() {
      const param = {
        id: this.teamID
      }
      user.deleteMyTeam(param).then(() => {
        this.GetMyTeam()
      })
    },

    //
    GetMyTeam() {
      user.GetMyTeam().then(r => {
        let data = r.data.data.tm
        let filter = []
        for (const filterElement of data) {
          if (filterElement.children.some(v => v.userID === this.$store.getters["userStore/userInfo"]._id)) {
            filter.push(filterElement)
          }
        }
        this.myTeam = filter
        localStorage.setItem("myTeam", JSON.stringify(filter))
      })
    }
  }
}
</script>

<style scoped>

</style>